import React, { useEffect, useState } from 'react';
import './App.css';
import axios from 'axios';

function App() {
  useEffect(()=>{
    console.log('useEffect')
    axios.get('http://geek.itheima.net/v1_0/channels').then(res => {
      console.log(res.data.data)
      setChannels(res.data.data.channels)
    })
  }, [])

  // const [name, setName] = useState<string>('小花')
  const [name, setName] = useState('小花')
  // 1. 告诉TS， channels具体的结构
  // const [channels, setChannels] = useState([{id:0,name:'xxx'}])

  // 2. 用useState的泛型，告诉ts具体的类型
  // const [channels, setChannels] = useState<any[]>([])
  
  type Channel = {id: number, name: string}
  const [channels, setChannels] = useState<Channel[]>([])
  
  return (
    <div className="App">
      {name} <button onClick={()=>setName('小白')}>改名字</button>
      <ul>
        {channels.map(it =>(<li key={it.id}>{it.name}</li>))}
      </ul>
    </div>
  );
}

export default App;
